<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h2>fetch核心语法</h2>
    <button class="btn">测试</button>
    <script>
        /** 
         * fetch核心语法
         * 1.如何发请求？
         * 2.如何处理响应？(JSON)
         * 3.如何处理异常？**/
        document.querySelector('.btn').addEventListener('click',async function(){
            const p=new URLSearchParams({pname:'江西省',cname:'南昌市'})
            console.log(p);
            // 1
            const res=await fetch('http://hmajax.itheima.net/api/area?'+p.toString())
            console.log(res);
            if(res.status>=200&&res.status<300){
                // 2. .json方法解析json 返回promise Promise 的解析 resolve 结果是将文本体解析为 JSON。
                const data=await res.json()
                console.log(data);
            }else{
                // 3
                console.log('请求异常',res.status);
            }

        })
    </script>
</body>
</html>